<template>
  <div class="tableSearchListFlexPage h100" style="padding: 10px 25px 10px 40px; overflow-y: auto;">
    <div class="borderWithRadius" style="width: 100%;background-color:white;margin:5px 0 5px 0;">
      <div style="font-size:14px; padding:10px 10px 10px 10px">
        <a-row>
          <a-col :span="9"><b>{{ $t('campaignStatus') }}: </b> {{ $store.getters.getDictCodeObj('loopTestTaskStatusDictCode')[LoopTestTaskInfo.status] || '-' }}</a-col>
          <a-col :span="12" v-if="LoopTestTaskInfo.resultMsg"><b>{{ $t('结果描述') }}: </b> {{ LoopTestTaskInfo.resultMsg }}</a-col>
        </a-row>
      </div>
    </div>
    <div class="borderWithRadius" style="width: 100%;background-color:white;margin:10px 0 15px 0;">
      <div style="padding:10px"><span style="font-weight:bold;font-size:14px;">任务车辆-基本信息</span></div>
      <full-parent-dom-with-dask :loading="loadingTaskCarModelInfoData" style="margin: 30px auto;position: absolute;"></full-parent-dom-with-dask>
      <div style="font-size:14px; padding:0 10px 10px 10px">
        <a-row type="flex" justify="space-between" style="margin-bottom: 5px;">
          <a-col :span="6"><b>{{ $t('VIN') }}: </b> {{ carInfo.vin || '-' }}</a-col>
          <a-col :span="6"><b>{{ $t('循环进度') }}: </b>
            <span v-if="typeof carInfo.loopNo === 'number'&&carInfo.loopTest&&typeof carInfo.loopTest.loopCount === 'number'"> {{ carInfo.loopNo +'/'+carInfo.loopTest.loopCount }}</span>
            <span v-else> {{ '-' }}</span>
          </a-col>
          <a-col :span="6"><b>{{ '车辆升级结果' }}: </b> {{ $store.getters.getDictCodeObj('taskVehicleStatusDictCode')[carInfo.upgradeStatus] || '-' }}</a-col>
        </a-row>
        <a-row type="flex" justify="space-between" style="margin-bottom: 5px;">
          <a-col :span="6"><b>{{ '品牌' }}: </b> {{ carInfo.loopTest&&carInfo.loopTest.model&&$store.getters.getDictCodeObj('companyDictCode')[carInfo.loopTest.model.company] || '-' }}</a-col>
          <a-col :span="6"><b>{{ '车型名称' }}: </b> {{ carInfo.loopTest&&carInfo.loopTest.model&&carInfo.loopTest.model.name || '-' }}</a-col>
          <a-col :span="6"><b>{{ '车型代码' }}: </b> {{ carInfo.loopTest&&carInfo.loopTest.model&&carInfo.loopTest.model.code || '-' }}</a-col>
        </a-row>
      </div>
    </div>
    <div style="margin-bottom: 20px;">
      <div style="padding:10px"><span style="font-weight:bold;font-size:14px;">ECU版本配置</span></div>
      <loop-test-task-ecu-version-config
        :isIcon="true"
        :taskId="taskId">
      </loop-test-task-ecu-version-config>
    </div>
    <a-form layout="vertical" >
      <a-row :gutter="[12,0]">
        <!-- 循环序号 -->
        <a-col :md="4" :sm="24">
          <a-form-model-item :label="$t('循环序号')">
            <a-input
              v-model="queryParam.loopNo"
              :placeholder="$t('pleaseInput') + '循环序号'"
              allow-clear
              @keyup.enter="refreshData(true)"/>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :md="4" :sm="24">
          <a-form-model-item :label="$t('循环测试ID')">
            <a-input
              v-model="queryParam.loopTestId"
              :placeholder="$t('pleaseInput') + '循环测试ID'"
              allow-clear
              @keyup.enter="refreshData(true)"/>
          </a-form-model-item>
        </a-col> -->
        <!-- 路线序号 -->
        <a-col :md="4" :sm="24">
          <a-form-model-item :label="$t('路线序号')">
            <a-input
              v-model="queryParam.stepNo"
              :placeholder="$t('pleaseInput') + '路线序号'"
              allow-clear
              @keyup.enter="refreshData(true)"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-model-item :label="'升级结果'">
            <a-select
              :showSearch="true"
              mode="multiple"
              :maxTagCount="1"
              :placeholder="$t('pleaseInput') + '升级结果'"
              :allow-clear="true"
              v-model="queryParam.upgradeResult"
              @change="refreshData(false)"
            >
              <a-select-option value="已唤醒">
                已唤醒
              </a-select-option>
              <a-select-option value="未唤醒">
                未唤醒
              </a-select-option>
              <a-select-option value="唤醒失败">
                唤醒失败
              </a-select-option>
              <a-select-option value="检测成功">
                检测成功
              </a-select-option>
              <a-select-option value="检测失败">
                检测失败
              </a-select-option>
              <a-select-option value="下载失败">
                下载失败
              </a-select-option>
              <a-select-option value="ECU下载中">
                ECU下载中
              </a-select-option>
              <a-select-option value="下载成功">
                下载成功
              </a-select-option>
              <a-select-option value="安装成功">
                安装成功
              </a-select-option>
              <a-select-option value="安装中">
                安装中
              </a-select-option>
              <a-select-option value="安装失败">
                安装失败
              </a-select-option>
              <a-select-option value="未知">
                未知
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24" style="margin-top: 22px;">
          <div class="searchBtns">
            <a-button-group>
              <auth-button type="primary" @click="refreshData(true)">
                <i class="iconfont icon-chazhao"></i>
                {{ $t('inquiry') }}
              </auth-button>
              <a-button @click="handleClear">
                <i class="iconfont icon-qingkong"></i>
                {{ $t('clear') }}
              </a-button>
            </a-button-group>
            <auth-button :auth="loopTestTaskPerms.cancel" type="danger" @click="handelCancel" :disabled="isCancelBtn || status==='SUCCESS' || status==='FAILED' || status==='CANCELED'">
              {{ $t('取消任务') }}
            </auth-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="commonTableSty">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :scrollX="900"
        :rowKey="(record, index) => index"
        size="default" >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.key"></table-ellipsis>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span style="display: flex;">
            <auth-button @click="openEcuUpgradeDetail(record)" class="set-margin" type="primary" :ghost="true" size="small">{{ $t('ECU升级详情') }}</auth-button>
            <!-- <auth-button @click="handleLogVisible" class="set-margin" type="primary" :ghost="true" size="small">{{ $t('下载日志') }}</auth-button> -->
          </span>
        </template>
      </s-table>
    </div>
    <!-- 下载日志弹窗 -->
    <!-- <custom-modal
      :width="1100"
      :visible="logVisible"
      title="下载日志"
      :destroyOnClose="true"
      @cancel="shutDownLogVisible"
      :isOkBtn="false"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }">
      <div class="tablePageWarp">
        <s-table
          class="h100"
          :columns="DownloadLogColumns"
          :data-source="downloadLogLists"
          :loading="loadingdownloadLogLists"
          :showPagination="false"
          rowKey="id">
        </s-table>
      </div>
    </custom-modal> -->
    <!-- ECU升级详情 -->
    <custom-modal
      :width="1100"
      :visible="ecuUpgradeVisible"
      @full="fullModal"
      title="ECU升级详情"
      :destroyOnClose="true"
      @cancel="shutecuUpgradeVisible"
      :isOkBtn="false"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }">
      <ecu-upgrade-detail ref="ecuUpgradeDetail" :EcuUpgradeDetailListParameters="EcuUpgradeDetailListParameters"></ecu-upgrade-detail>
    </custom-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import CustomModal from '@/components/CustomModal/index.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { LoopTestTaskVehicleUpgradeDetailsColumns, DownloadLogColumns } from '@/views/task/test/list'
import EcuUpgradeDetail from '@/views/task/components/EcuUpgradeDetail'
import { mapState } from 'vuex'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { loopTestTaskPerms } from '@/config/permission/index'
import LoopTestTaskEcuVersionConfig from '@/views/task/components/LoopTestTaskEcuVersionConfig.vue'
const initQueryParam = {
  loopNo: undefined,
  // loopTestId: undefined,
  stepNo: undefined,
  upgradeResult: undefined
}
export default {
  components: {
    STable,
    AuthButton,
    CustomModal,
    TableEllipsis,
    EcuUpgradeDetail,
    FullParentDomWithDask,
    LoopTestTaskEcuVersionConfig
  },
  props: {
    taskId: {
      type: String,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    },
    // 任务状态
    status: {
      type: String,
      default: ''
    },
    // 循环测试任务列表刷新方法
    LoopRefreshData: {
      type: Function,
      default: null
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    },
    ...mapState({
      taskVehicleStatusDictCode: (state) => state.dict.taskVehicleStatusDictCode
    })
  },
  created () {
    this.$store.dispatch('getTaskVehicleStatusDictCodeData')
    this.$store.dispatch('getCompanyDictCodeData')
    this.$store.dispatch('getLoopTestTaskStatusDictCodeData')
  },
  data () {
    return {
      loopTestTaskPerms,
      EcuUpgradeDetailListParameters: {},
      DownloadLogColumns,
      moment,
      columns: [...LoopTestTaskVehicleUpgradeDetailsColumns],
      // 列表数据
      tableData: [],
      queryParam: { ...initQueryParam },
      time: Date.now(),
      logVisible: false,
      downloadLogLists: [],
      loadingdownloadLogLists: false,
      ecuUpgradeVisible: false,
      carInfo: {},
      isCancelBtn: false,
      loadingTaskCarModelInfoData: false,
      LoopTestTaskInfo: {}
    }
  },
  watch: {
    taskId: {
      handler (val) {
        this.getVehicleDetails()
      },
      immediate: true
    }
  },
  mounted () {
    this.getLoopTestTaskDetails()
  },
  methods: {
    fullModal () {
      this.$refs.ecuUpgradeDetail.resize();
    },
    // 获取循环测试任务详细信息
    getLoopTestTaskDetails () {
      this.$api.getLoopTestTaskDetails(this.taskId).then((res) => {
        this.LoopTestTaskInfo = res.data
      })
    },
    // 取消任务
    handelCancel () {
      const vm = this
      this.$confirm({
        title: vm.$t('cancelTask'),
        content: vm.$t('newCancelTaskTip').replace('__TaskName__', vm.taskName),
        class: 'confirmStyle',
        width: 378,
        onOk () {
          vm.$api.cancelLoopTestTask(vm.taskId).then(() => {
            vm.$message.success(vm.$t('successfullyOperation'))
            vm.LoopRefreshData()
            vm.isCancelBtn = true
          })
        },
        onCancel () { }
      })
    },
    // 获取车辆详情信息
    getVehicleDetails () {
      this.loadingTaskCarModelInfoData = true
      this.$api.getLoopTestTaskVehicleDetails(this.taskId)
        .then((res) => {
          if (res.data) {
            this.carInfo = res.data
            this.loadingTaskCarModelInfoData = false
            this.refreshData(true)
          }
        })
        .finally(() => {
          this.loadingTaskCarModelInfoData = false
        })
    },
    // 打开ECU升级详情
    openEcuUpgradeDetail (record) {
      this.ecuUpgradeVisible = true
      this.EcuUpgradeDetailListParameters = {
        vin: record.vin,
        batchId: record.batchId,
        checkSeqNo: record.checkSeqNo,
        taskId: record.taskId,
        processId: record.processId,
        taskName: record.taskName,
        date: new Date().getTime()
      }
    },
    shutecuUpgradeVisible () {
      this.ecuUpgradeVisible = false
    },
    // 打开下载日志弹窗
    handleLogVisible () {
      this.logVisible = true
    },
    shutDownLogVisible () {
      this.logVisible = false
    },
    // 重置
    handleClear () {
      this.queryParam = { ...initQueryParam }
      this.refreshData(true)
    },
    // 刷新
    refreshData (isToFirstPage = false) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    },
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.tableData = []
      const apiPromise = vm.$api.upgradeMonitorList({ ...parameter, ...JnqueryParam, vin: this.carInfo.vin, loopTestId: this.carInfo.loopTest.id })
      return new Promise((resolve, reject) => {
        return apiPromise.then(res => {
          if (res.data) {
            this.tableData = res.data
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
.set-margin {
  margin-right: 12px;
}
@border: 1px solid @borderColor;
.borderWithRadius {
    border: @border;
    border-radius: @border-radius-base;
}
</style>
